<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>性别</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<style>
			body {
				background-color: #f2f2f2;
			}
			.aui-bar {
				background-color: #6ac82c;
			}
			.list-view {
				margin-top: 15px;
			}
			.list-view li {
				overflow: hidden;
				padding: 15px;
				background-color: #fff;
				position:relative;
			}
			.list-view li .mask{
				position:absolute;
				width: 55px;
				height:55px;
				right:0;
				top:0;
			}
			.list-view li:first-child {
				border-bottom: 1px solid #f2f2f2;
			}
			.list-view li p {
				font-size: 18px;
				color: #333;
				line-height: 26px;
			}
			.aui-radio {
				margin: 0;
			}
			.aui-radio:checked {
				background-color: #409ee1;
				border-color: #409ee1;
			}
		</style>
	</head>
	<body>
    <div id="top-div"></div>
		<header id="header" class="aui-bar aui-bar-nav">
			<a href="../html/infor_setting.html" class="aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<div id="header-title" class="aui-title">
				性别
			</div>
		</header>
		<ul class="list-view">
			<li>
				<p class="aui-pull-left">
					男
				</p>
				<input class="aui-pull-right aui-radio" type="radio" name="radio"/>
				<div class="mask"></div>
			</li>
			<li>
				<p class="aui-pull-left">
					女
				</p>
				<input class="aui-pull-right aui-radio" type="radio" name="radio" checked="checked"/>
				<div class="mask"></div>
			</li>
		</ul>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript">
		$('.list-view li').click(function() {
			$('.list-view li input').removeAttr('checked');
			$(this).find('input').attr('checked','checked');
		});
	</script>
</html>